<!-- @format -->
<script setup>
	import { reactive } from 'vue'
	import { ARTICLE_OPS_TYPE } from '@/constant/article'
	import {
		getArticleDetailApi,
		postArticleApi,
		putArticleApi
	} from '@/api/article'

	import { ElMessage } from 'element-plus'

	// defineEmits(): 传入数组参数，表示当前组件触发了哪些自定义事件，
	// 为了直观的可以看到，如果不写，不影响功能
	const emit = defineEmits(['finish', 'close'])

	const props = defineProps({
		// 当前操作类型：新增/预览/编辑
		opsType: {
			type: String, // 类型
			default: '' // 默认值
		},
		// 当前操作的文章id
		articleId: {
			type: String,
			default: ''
		}
	})

	// 当前文章表单对象
	const articleForm = reactive({
		id: '', // 文章 id
		stem: '', // 文章标题
		content: '' // 文章内容
	})

	getArticleDetail()

	// 获取文章详情
	async function getArticleDetail() {
		// 判断是否存在文章 id
		if (!props.articleId) return
		// 请求文章详情
		const detail = await getArticleDetailApi(props.articleId)
		// 给表单字段赋值
		Object.keys(articleForm).forEach((key) => {
			articleForm[key] = detail[key]
		})
	}

	// 确认
	const onConfirm = async () => {
		if (props.articleId) {
			// 编辑

			// 调接口
			await putArticleApi(articleForm)
		} else {
			// 新增

			// 解构
			const { stem, content } = articleForm
			// 调接口
			await postArticleApi({
				stem,
				content
			})

			// 清空表单
			Object.keys(articleForm).forEach((key) => {
				articleForm[key] = ''
			})
		}
		// 成功提示
		ElMessage.success(props.articleId ? '编辑成功' : '新增成功')
		// 通过父组件 (1.关闭抽屉 2.获取文章列表)
		emit('finish')
	}

	// 取消
	const onCancel = () => {
		// 通知父组件: 关闭抽屉组件
		emit('close')
	}
</script>

<template>
	<!-- 预览结构 -->
	<div
		class="preview"
		v-if="props.opsType === ARTICLE_OPS_TYPE.preview">
		<h4>{{ articleForm.stem }}</h4>
		<div v-html="articleForm.content"></div>
	</div>
	<!-- 新增/编辑结构 -->
	<el-form
		label-width="55px"
		v-else>
		<el-form-item label="标题">
			<el-input
				placeholder="请输入文字标题"
				v-model="articleForm.stem" />
		</el-form-item>
		<el-form-item label="内容">
			<!-- 富文本编辑器组件 -->
			<QuillEditor
				v-model:content="articleForm.content"
				contentType="html"
				theme="snow"
				toolbar="full"
				placeholder="请输入文章内容" />
		</el-form-item>
		<el-form-item>
			<el-button
				type="primary"
				@click="onConfirm"
				>确 认</el-button
			>
			<el-button @click="onCancel">取 消</el-button>
		</el-form-item>
	</el-form>
</template>

<style scoped lang="scss">
	.el-form {
		.el-input {
			height: 36px;
		}
		// 样式穿透
		:deep(.ql-container) {
			width: 100%;
			min-height: 200px;
		}
		.el-form-item:last-child {
			margin-top: 100px;
		}
	}
</style>
